<template>
  <div>
    <!-- :inline="true"行内表单 -->
    <el-form :inline="true" :model="categoryFrom" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" v-model="categoryFrom.category1id" @change="getCategory2List" :disabled="show">
          <el-option :label="category1.name" :value="category1.id" v-for="(category1, index) in category1List" :key="category1.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="categoryFrom.category2id" @change="getCategory3List" :disabled="show">
          <el-option :label="category2.name" :value="category2.id" v-for="(category2, index) in category2List" :key="category2.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="categoryFrom.category3id" @change="getCategoryInfoList" :disabled="show">
          <el-option :label="category3.name" :value="category3.id" v-for="(category3, index) in category3List" :key="category3.id" ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelect",
  props: ['show'],
  data() {
    return{
        category1List: [],
        category2List: [],
        category3List: [],
        categoryFrom: {
            category1id: '',
            category2id: '',
            category3id: '',
        },
    }
  },
  mounted(){
    this.getCategory1List();
  },
  methods: {
    // 获取一级联动
    async getCategory1List(){
        let result = await this.$API.attr.reqgetCategory1List();
        if(result.code == 200){
            this.category1List = result.data
        }
    },
    // 获取二级联动
    async getCategory2List(){
        const { category1id } = this.categoryFrom
        let result = await this.$API.attr.reqgetCategory2List(category1id);
        if(result.code == 200){
            this.category2List = result.data
            this.categoryFrom.category2id = ''
            this.categoryFrom.category3id = ''
        }
    },
    // 获取三级联动
    async getCategory3List(){
        const { category2id } = this.categoryFrom
        let result = await this.$API.attr.reqgetCategory3List(category2id);
        if(result.code == 200){
            this.category3List = result.data
            this.categoryFrom.category3id = ''
        }
    },
    // 三级分类回调，获取品牌信息列表
    getCategoryInfoList(){
        const { category1id, category2id, category3id } = this.categoryFrom
        this.$emit("getCategoryInfo", { category1id, category2id, category3id })
    },
  },
};
</script>

<style scoped>
</style>